import React from 'react';
import {Link, useNavigate} from "react-router-dom";

function Home(props) {
    const navigate = useNavigate();
    return (
        <div>
            <h3>首页</h3>
            <hr/>
            <h4>通过search进行参数的传递</h4>
            <Link to={"/newsList?id=1&type=2"}>传递参数至新闻列表页1</Link>|
            <Link to={{
                pathname:"/newsList",
                search:"id=10&type=20"
            }}>传递参数至新闻列表页2</Link>|
            <button onClick={()=>navigate("/newsList?id=100&type=200")}>传递参数至新闻列表页3</button>
            <button onClick={()=>navigate({
                pathname:"/newsList",
                search:"id=1000&type=2000"
            })}>传递参数至新闻列表页4</button>
            <hr/>
            <h4>通过state进行参数的传递</h4>
            <Link to={"/goodsList"} state={{
                id:1,
                type:2
            }}>传递参数至商品列表页</Link>|
            <Link to={{
                pathname:"/goodsList"
            }} state={{
                id:10,
                type:20
            }}>传递参数至商品列表页</Link>|
            <button onClick={()=>{
                navigate("/goodsList",{
                    state:{
                        id:100,
                        type:200
                    }
                })
            }}>传递参数至商品列表页</button>
            <hr/>
            <h4>通过params进行参数的传递</h4>
            <Link to={"/my/two/1/2.html"}>传递参数至我的个人中心下的two</Link>
        </div>
    );
}

export default Home;